<template>
	<view class="page-box">
		<view class="pad-30 list-box">
			<view v-for="item in list" :key="item.id" class="pad-30 bg-white radius30 mar-bottom-30">
				<view class="betweenX centerY">
					<view class="centerXY">
						<view class="mar-left-20">
							<view class="font-26">{{item.content}}</view>
							<view class="font-24 color-646464">{{timeFormat(item.created_at, 'yyyy-mm-dd hh:MM')}}
							</view>
						</view>
					</view>
				</view>
				<view class="mar-top-30 image-box flex">
					<image class="image" v-for="(img,index) in item.pics" :key="index" :src="img" mode="aspectFill">
					</image>
				</view>
			</view>

			<u-empty marginTop="100" v-if="list.length == 0" width="40" height="40" text="暂无数据"
				icon="/static/image/cancel.png"></u-empty>
		</view>

		<view class="button-bottom centerXY">
			<view @click="hanldeTrendsInfo" class="btn font-32 mar-left-20 button-style">上传</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';

	import {
		timeFormat,
	} from '@/node_modules/uview-plus';

	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	import {
		orderTrends
	} from '@/api/index.js'

	// 接收参数
	const props = ref({});
	onLoad((option) => {
		if (option.order_no) {
			props.value = option;
			getorderTrends()
		}
	})

	const list = ref([])

	const getorderTrends = () => {
		orderTrends({
			order_no: props.value.order_no
		}).then(res => {
			list.value = res.data.lists;
		})
	}

	const hanldeTrendsInfo = () => {
		uni.navigateTo({
			url: '/pages/order/trendsInfo/trendsInfo?order_no=' + props.value.order_no
		})
	}

	onShow(() => {
		getorderTrends();
	});
</script>

<style scoped>
	.page-box {
		padding-bottom: 130rpx;
	}

	.head {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.image {
		display: block;
		width: 196rpx;
		height: 210rpx;
	}

	.button-bottom {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 2;
	}

	.btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.image-box {
		flex-wrap: wrap;
		gap: 20rpx;
	}
</style>